<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport"
              content="width=device-width, initial-scale=1">
        <title>Amaze UI Examples</title>

        <!-- Set render engine for 360 browser -->
        <meta name="renderer" content="webkit">

        <!-- No Baidu Siteapp-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>

        <link rel="icon" type="image/png" href="Public/AmazeUI/assets/i/favicon.png">

        <!-- Add to homescreen for Chrome on Android -->
        <meta name="mobile-web-app-capable" content="yes">
        <link rel="icon" sizes="192x192" href="Public/AmazeUI/assets/i/app-icon72x72@2x.png">

        <!-- Add to homescreen for Safari on iOS -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
        <link rel="apple-touch-icon-precomposed" href="Public/AmazeUI/assets/i/app-icon72x72@2x.png">

        <!-- Tile icon for Win8 (144x144 + tile color) -->
        <meta name="msapplication-TileImage" content="/AmazeUI/assets/i/app-icon72x72@2x.png">
        <meta name="msapplication-TileColor" content="#0e90d2">

        <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
        <!--
        <link rel="canonical" href="http://www.example.com/">
        -->

        <link rel="stylesheet" href="__PUBLIC__/AmazeUI/assets/css/amazeui.min.css">
        <link rel="stylesheet" href="__PUBLIC__/AmazeUI/assets/css/app.css">
        <link href="__PUBLIC__/Application/css/style.css" rel="stylesheet" type="text/css"/>
        <style>
            @media only screen and (min-width: 1200px) {
                .blog-g-fixed {
                    max-width: 1200px;
                }
            }

            @media only screen and (min-width: 641px) {
                .blog-sidebar {
                    font-size: 1.4rem;
                }
            }

            .blog-main {
                padding: 20px 0;
            }

            .blog-title {
                margin: 10px 0 20px 0;
            }

            .blog-meta {
                font-size: 14px;
                margin: 10px 0 20px 0;
                color: #222;
            }

            .blog-meta a {
                color: #27ae60;
            }

            .blog-pagination a {
                font-size: 1.4rem;
            }

            .blog-team li {
                padding: 4px;
            }

            .blog-team img {
                margin-bottom: 0;
            }

            .blog-content img,
            .blog-team img {
                max-width: 100%;
                height: auto;
            }

            .blog-footer {
                padding: 10px 0;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--[if lte IE 9]>
        <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
          href="http://browsehappy.com/" target="_blank">升级浏览器</a>
          以获得更好的体验！</p>
        <![endif]-->
        <header id="amz-header" class="am-topbar am-topbar-inverse">
            <div class="amz-container" style="max-width: 1200px;">
                <h1 class="am-topbar-brand">
                    <a href="#">NBA 直播吧</a>
                </h1>

                <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

                <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
                    {:W('NaviMenu/show')}
                </div>
            </div>
        </header>

        <div class="am-g am-g-fixed blog-g-fixed">

            <div class="am-u-md-8">
                <div id="articleList">


                </div>
                <ul class="am-pagination blog-pagination">
                    <li class="am-pagination-prev"><a href="javascript:void(0)" id="prev">&laquo; 上一页</a></li>
                    <li class="am-pagination-next"><a href="javascript:void(0)" id="next">下一页 &raquo;</a></li>
                </ul>
            </div>

            <div class="am-u-md-4 blog-sidebar">
                <div class="am-panel-group">
                    <section class="am-panel am-panel-default">
                        <div class="am-panel-hd">关于我</div>
                        <div class="am-panel-bd">
                            <p>前所未有的中文云端字型服务，让您在 web 平台上自由使用高品质中文字体，跨平台、可搜寻，而且超美。云端字型是我们的事业，推广字型学知识是我们的志业。从字体出发，关心设计与我们的生活，justfont blog
                                正是為此而生。</p>
                            <a class="am-btn am-btn-success am-btn-sm" href="#">查看更多 →</a>
                        </div>
                    </section>
                    <section class="am-panel am-panel-default">
                        <div class="am-panel-hd">文章目录</div>
                        <ul class="am-list blog-list">
                            <li><a href="#">Google fonts 的字體（sans-serif 篇）</a></li>
                            <li><a href="#">[but]服貿最前線？－再訪桃園機場</a></li>
                            <li><a href="#">到日星鑄字行學字型</a></li>
                            <li><a href="#">glyph font vs. 漢字（上）</a></li>
                            <li><a href="#">浙江民間書刻體上線</a></li>
                            <li><a href="#">[極短篇] Android v.s iOS，誰的字體好讀？</a></li>
                        </ul>
                    </section>

                    <section class="am-panel am-panel-default">
                        <div class="am-panel-hd">团队成员</div>
                        <div class="am-panel-bd">
                            <ul class="am-avg-sm-4 blog-team">
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230159_kjTmC.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/>
                                </li>
                                <li><img class="am-thumbnail"
                                         src="http://img4.duitang.com/uploads/blog/201406/15/20140615230159_kjTmC.thumb.224_0.jpeg" alt=""/>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
            </div>

        </div>
        <footer class="am-margin-top">
            <hr/>
            <p class="am-text-center">
                <small>by The NBA直播吧</small>
            </p>
        </footer>

        <script id="articleListTemplate" type="text/x-jsrender">
            <article class="blog-main">
                <h3 class="am-article-title">
                  <a href="{{>category}}/{{>id}}.html">{{>id}}{{>title}}</a>
                </h3>
                <h4 class="am-article-meta blog-meta">by <a href="">{{>author}}</a> posted on {{>recordTime}} under <a href="#">javascript</a>
                </h4>

                <div class="am-g blog-content">
                  <div class="am-u-lg-7">
                  {{>abstract}}
                  </div>
                </div>
              </article>
              <hr class="am-article-divider blog-hr">
        </script>

        <!--[if lt IE 9]>
        <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
        <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
        <![endif]-->

        <!--[if (gte IE 9)|!(IE)]><!-->
        <script src="__PUBLIC__/AmazeUI/assets/js/jquery.min.js"></script>
        <!--<![endif]-->
        <script src="__PUBLIC__/AmazeUI/assets/js/amazeui.min.js"></script>
        <script src="__PUBLIC__/plugins/moment.min.js"></script>
        <!--        <script src="__PUBLIC__/js/jquery.render.js"></script>-->
        <script src="__PUBLIC__/plugins/jsrender.min.js"></script>

        <script>
var category = "{$category}";
var start = 0;
var length = 5;
var isEnd = false;
$(function () {
    loadArticle();
    $("#prev").on("click", function (e) {
        e.stopPropagation();
        start = start - length > 0 ? start - length : 0;
        loadArticle();
        
    });
    $("#next").on("click", function (e) {
        e.stopPropagation();
        if(!isEnd){
            start += length;
            loadArticle();
            
        }
    });
    
});
var loadArticle = function () {
        $.post("getArticleByCategory.html", {category: category, start: start, length: length}, function (res) {
            if (res != null && res.length > 0) {
                $.each(res, function (i) {
                    res[i].recordTime = moment().format("YYYY/MM/DD", res[i].recordTime);
                    res[i].category = category;
                });
                var html = $("#articleListTemplate").render(res);
                $("#articleList").html(html);
                
                
                isEnd = res.length - length < 0;
            }else{
                $("#articleList").html("没有找到数据");
            }

        });
    };
        </script>
    </body>
</html>
